<template>
    <div>
        <!-- 缓存组件状态:把当前组件内的操作状态保存下来.
        无论该组件是否被销毁,只要打开该组件,状态时保持的 -->

        <!-- keep-alive -->
        <button @click="showDom = 'A1'">
            A1
        </button>
        <button @click="showDom = 'A2'">
            A2
        </button>
        <keep-alive include exclude="">
            <!--keep-alive的两个属性, 
                exclude里写不包含谁
                include里写包含谁 -->
          <A1 v-if="showDom === 'A1'"></A1>
          <A2 v-else></A2>  
        </keep-alive>
        
    </div>
</template>
<script>
import A1 from "./A1"
import A2 from './A2.vue'
export default {
    data(){
        return{
            showDom:"A1"
        }
    },
    components:{A1,A2}
}
</script>